<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="收款账户管理"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top"></div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 收款账户列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="acountList.length > 0?'没有更多了哦！':''"
        :offset="10"
        @load="onLoad"
        :immediate-check="false"
        ref="list"
      >
        <van-cell-group>
          <van-cell v-for="index in 10" :key="index">
            <span slot="title">账户名：小苏</span>
            <template slot="label">
              <p>所属银行：中国建设银行</p>
              <p>分支行：泉州分行</p>
              <p>卡号：123456789123456789</p>
              <div class="mt-10">
                <van-button
                  type="danger"
                  size="small"
                  to="/bussinessSetting/receiptAcountManage/edit"
                >编辑</van-button>
                <van-button type="warning" class="ml-20" size="small">删除</van-button>
              </div>
            </template>
            <van-icon
              v-if="index == 1"
              slot="right-icon"
              name="success"
              class="color-danger"
              style="line-height: inherit;font-size:0.8rem;"
            />
          </van-cell>
        </van-cell-group>
        <!-- <no-data v-if="acountList.length == 0 && !loading" /> -->
      </van-list>
    </van-pull-refresh>

    <div class="has-bottom"></div>

    <div class="fixed-bottom">
      <van-button type="danger" size="large" to="/bussinessSetting/receiptAcountManage/add">新增收款账号</van-button>
    </div>
  </div>
</template>

<script>
import noData from 'components/noData'
import { getList } from 'api/paymentAccount'

export default {
  components: {
    noData
  },
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      // 上拉加载更多
      loading: false,
      finished: true,
      acountList: []
    }
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
      }, 500)
    },
    // 上拉异步加载更多
    onLoad() {
      console.log('加载更多')
      setTimeout(() => {
        this.loading = false
        this.finished = true
      }, 500)
    },
    getList() {
      getList().then(res => {
        console.log(res)
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.van-pull-refresh {
  overflow: inherit;
}
</style>
